<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="cheng5.du">
    
    <title>
        
            前端基础知识体系-JS-WEB-API(DOM、BOM) |
        
        cheng5.du
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/avatar.jpeg">
    
<link rel="stylesheet" href="/css/font-awesome.min.css">

    <script id="hexo-configurations">
    let KEEP = window.KEEP || {};
    KEEP.hexo_config = {"hostname":"example.com","root":"/","language":"zh-CN"};
    KEEP.theme_config = {"toc":{"enable":false,"number":false,"expand_all":false,"init_open":false},"style":{"primary_color":"#0066CC","avatar":"/images/avatar.jpeg","favicon":"/images/avatar.jpeg","article_img_align":"left","left_side_width":"260px","content_max_width":"920px","hover":{"shadow":false,"scale":false},"first_screen":{"enable":true,"background_img":"/images/bg.svg","description":"人生海海，来日方长。"},"scroll":{"progress_bar":{"enable":false},"percent":{"enable":false}}},"local_search":{"enable":false,"preload":false},"code_copy":{"enable":false,"style":"default"},"pjax":{"enable":false},"lazyload":{"enable":false},"version":"3.4.5"};
    KEEP.language_ago = {"second":"%s 秒前","minute":"%s 分钟前","hour":"%s 小时前","day":"%s 天前","week":"%s 周前","month":"%s 个月前","year":"%s 年前"};
  </script>
<meta name="generator" content="Hexo 6.1.0"></head>


<body>
<div class="progress-bar-container">
    

    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            <header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
            <a class="logo-title" href="/">
                cheng5.du
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                首页
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                归档
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                分类
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/tags"
                            >
                                标签
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/netease"
                            >
                                网抑云
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/about"
                            >
                                关于我
                            </a>
                        </li>
                    
                    
                </ul>
            </div>
            <div class="mobile">
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">首页</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">归档</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">分类</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/tags">标签</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/netease">网抑云</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/about">关于我</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="article-content-container">

        <div class="article-title">
            <span class="title-hover-animation">前端基础知识体系-JS-WEB-API(DOM、BOM)</span>
        </div>

        
            <div class="article-header">
                <div class="avatar">
                    <img src="/images/avatar.jpeg">
                </div>
                <div class="info">
                    <div class="author">
                        <span class="name">cheng5.du</span>
                        
                    </div>
                    <div class="meta-info">
                        <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fas fa-edit"></i>&nbsp;
        <span class="pc">2021-05-08 15:34:27</span>
        <span class="mobile">2021-05-08 15:34</span>
    </span>
    
        <span class="article-categories article-meta-item">
            <i class="fas fa-folder"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB/">知识体系</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/%E6%80%BB%E7%BB%93/">总结</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/JS/">JS</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/JS-WEB-API/">JS-WEB-API</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
    
    
</div>

                    </div>
                </div>
            </div>
        

        <div class="article-content markdown-body">
            <h2 id="DOM"><a href="#DOM" class="headerlink" title="DOM"></a>DOM</h2><blockquote>
<p>DOM（Document Object Model）：文档对象模型，是W3C组织推荐的处理可扩展置标语言的标准编程接口。</p>
</blockquote>
<p><img src="https://cdn.jsdelivr.net/gh/superFatDu/blogPics@main/20210511/htmlpage.2zv52ljd0cq0.png" alt="dom-tree"></p>
<h3 id="DOM节点操作"><a href="#DOM节点操作" class="headerlink" title="DOM节点操作"></a>DOM节点操作</h3><h4 id="获取DOM节点"><a href="#获取DOM节点" class="headerlink" title="获取DOM节点"></a>获取DOM节点</h4><h5 id="通过元素类型获取"><a href="#通过元素类型获取" class="headerlink" title="通过元素类型获取"></a>通过元素类型获取</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">document</span>.<span class="title function_">getElementById</span>() <span class="comment">// id</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">getElementsByTagName</span>() <span class="comment">// tagName =&gt; array</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>() <span class="comment">// className =&gt; array</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">getElementsByName</span>() <span class="comment">// name =&gt; array</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">querySelector</span>()</span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>()</span><br></pre></td></tr></table></figure>

<h5 id="通过关系树获取（遍历节点树）"><a href="#通过关系树获取（遍历节点树）" class="headerlink" title="通过关系树获取（遍历节点树）"></a>通过关系树获取（遍历节点树）</h5><p>DOM可以将任何HTML、XML文档描述称一个多层次的节点树。所有的节点都有nodeType属性，代表节点的不同类型。常用类型如下：</p>
<ol>
<li>Element类型（元素节点）：nodeType为 1</li>
<li>Text类型（文本节点）：nodeType为 3</li>
<li>Comment类型（注释节点）：nodeType为 8</li>
<li>Document类型（document节点）：nodeType为 9</li>
</ol>
<p>遍历属性：</p>
<ol>
<li>parentNode &#x2F;&#x2F; 父节点</li>
<li>childNodes &#x2F;&#x2F; 子节点</li>
<li>firstChild &#x2F;&#x2F; 第一个子节点</li>
<li>lastChild &#x2F;&#x2F; 最后一个子节点</li>
<li>nextSibling &#x2F;&#x2F; 后一个兄弟节点</li>
<li>previousSibling &#x2F;&#x2F; 前一个兄弟节点</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">&#x27;has-navbar&#x27;</span>)[<span class="number">0</span>].<span class="property">childNodes</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// output</span></span><br><span class="line"><span class="title class_">NodeList</span>(<span class="number">10</span>)</span><br><span class="line"><span class="number">0</span>: text</span><br><span class="line"><span class="number">1</span>: a</span><br><span class="line"><span class="number">2</span>: text</span><br><span class="line"><span class="number">3</span>: div#top_nav.<span class="property">navbar</span>.<span class="property">forpc</span></span><br><span class="line"><span class="number">4</span>: text</span><br><span class="line"><span class="number">5</span>: div#home</span><br><span class="line"><span class="number">6</span>: text</span><br><span class="line"><span class="number">7</span>: input#antiforgery_token</span><br><span class="line"><span class="number">8</span>: text</span><br><span class="line"><span class="number">9</span>: iframe#google_osd_static_frame_9713154175128</span><br><span class="line"><span class="attr">length</span>: <span class="number">10</span></span><br></pre></td></tr></table></figure>

<h5 id="通过元素节点遍历"><a href="#通过元素节点遍历" class="headerlink" title="通过元素节点遍历"></a>通过元素节点遍历</h5><ol>
<li>parentElement &#x2F;&#x2F; 父元素节点</li>
<li>children</li>
<li>firstElementChild</li>
<li>lastElementChild</li>
<li>nextElementSibling</li>
<li>previousElementSibling</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">&#x27;has-navbar&#x27;</span>)[<span class="number">0</span>].<span class="property">children</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// output</span></span><br><span class="line"><span class="title class_">HTMLCollection</span>(<span class="number">5</span>)</span><br><span class="line"><span class="number">0</span>: a</span><br><span class="line"><span class="number">1</span>: div#top_nav.<span class="property">navbar</span>.<span class="property">forpc</span></span><br><span class="line"><span class="number">2</span>: div#home</span><br><span class="line"><span class="number">3</span>: input#antiforgery_token</span><br><span class="line"><span class="number">4</span>: iframe#google_osd_static_frame_9713154175128</span><br><span class="line"><span class="attr">length</span>: <span class="number">5</span></span><br></pre></td></tr></table></figure>

<h5 id="节点属性操作"><a href="#节点属性操作" class="headerlink" title="节点属性操作"></a>节点属性操作</h5><ol>
<li>attribute <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;p-test&quot;</span>&gt;</span>这是测试<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> p = <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&#x27;p&#x27;</span>)[<span class="number">0</span>]</span><br><span class="line">p.<span class="title function_">setAttribute</span>(<span class="string">&#x27;data-name&#x27;</span>, <span class="string">&#x27;ppppp&#x27;</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(p.<span class="title function_">getAttribute</span>(<span class="string">&#x27;data-name&#x27;</span>)) <span class="comment">// &#x27;ppppp&#x27;</span></span><br></pre></td></tr></table></figure></li>
<li>property <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;p-test&quot;</span>&gt;</span>这是测试<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

 <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.p-test</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> p = <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&#x27;p&#x27;</span>)[<span class="number">0</span>]</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(p.<span class="property">style</span>.<span class="property">width</span>) <span class="comment">// &#x27;100px&#x27;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(p.<span class="property">className</span>) <span class="comment">// &#x27;p-text&#x27;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(p.<span class="property">nodeName</span>) <span class="comment">// p</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(p.<span class="property">nodeType</span>) <span class="comment">// 1</span></span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="DOM结构操作"><a href="#DOM结构操作" class="headerlink" title="DOM结构操作"></a>DOM结构操作</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;divEle&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">&quot;oldEle&quot;</span>&gt;</span>This is old element<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> divEle = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;#div&#x27;</span>)</span><br></pre></td></tr></table></figure>

<h4 id="新增-x2F-插入节点"><a href="#新增-x2F-插入节点" class="headerlink" title="新增&#x2F;插入节点"></a>新增&#x2F;插入节点</h4><p>如果不是新增的节点，选中的节点存在于文档流中，执行parentEle.appendChild(existEle)时，会将existEle移动到parentEle中。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 添加节点</span></span><br><span class="line"><span class="keyword">const</span> newEle = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&#x27;p&#x27;</span>)</span><br><span class="line">newEle.<span class="property">innerHTML</span> = <span class="string">&#x27;This is new element&#x27;</span></span><br><span class="line"><span class="comment">// 插入</span></span><br><span class="line">divEle.<span class="title function_">appendChild</span>(newEle)</span><br></pre></td></tr></table></figure>

<h4 id="删除节点"><a href="#删除节点" class="headerlink" title="删除节点"></a>删除节点</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">divEle.<span class="title function_">removeChild</span>(newP)</span><br></pre></td></tr></table></figure>

<h4 id="替换节点"><a href="#替换节点" class="headerlink" title="替换节点"></a>替换节点</h4><p>用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。如果替换的节点存在于DOM树种，首先会被从原来的位置删除，然后replace被替换的节点。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> oldEle = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;#oldEle&#x27;</span>)</span><br><span class="line"></span><br><span class="line">divEle.<span class="title function_">replaceChild</span>(newEle, oldEle)</span><br></pre></td></tr></table></figure>

<h4 id="插入节点"><a href="#插入节点" class="headerlink" title="插入节点"></a>插入节点</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">divEle.<span class="title function_">insertBefor</span>(newEle, oldEle) <span class="comment">// 在oldEle之前插入newEle</span></span><br></pre></td></tr></table></figure>

<h4 id="复制节点"><a href="#复制节点" class="headerlink" title="复制节点"></a>复制节点</h4><p>element.cloneNode(boolean) &#x3D;&gt; boolean: true深复制当前及所有子节点；boolean: false浅复制当前节点</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> cloneEle1 = newEle.<span class="title function_">cloneNode</span>(<span class="literal">true</span>)</span><br><span class="line"><span class="keyword">const</span> cloneEle2 = newEle.<span class="title function_">cloneNode</span>(<span class="literal">false</span>)</span><br></pre></td></tr></table></figure>

<h4 id="移动节点"><a href="#移动节点" class="headerlink" title="移动节点"></a>移动节点</h4><ol>
<li>方法一：如果要移动，肯定是存在的节点，所以appendChild(ele)就能移动节点</li>
<li>方法二：克隆（cloneNode）原节点，删除（removeChild）原节点，插入（insertBefore）克隆的节点。</li>
</ol>
<h3 id="DOM性能"><a href="#DOM性能" class="headerlink" title="DOM性能"></a>DOM性能</h3><p>DOM操作一方面会引起回流重绘，而且JS引擎和渲染引擎需要来回切换执行上下文，都很消耗性能，所以需要避免频繁操作DOM。</p>
<h4 id="提升方法"><a href="#提升方法" class="headerlink" title="提升方法"></a>提升方法</h4><h5 id="对DOM查询做缓存"><a href="#对DOM查询做缓存" class="headerlink" title="对DOM查询做缓存"></a>对DOM查询做缓存</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 不缓存</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="variable language_">document</span>.<span class="title function_">getElementsByTagName</span>(<span class="string">&#x27;p&#x27;</span>).<span class="property">length</span>; i++) &#123;</span><br><span class="line">  <span class="comment">// TODO</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 缓存</span></span><br><span class="line"><span class="keyword">const</span> len = <span class="variable language_">document</span>.<span class="title function_">getElementsByTagName</span>(<span class="string">&#x27;p&#x27;</span>).<span class="property">length</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; len; i++) &#123;</span><br><span class="line">  <span class="comment">// TODO</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="将频繁的操作改为一次性操作"><a href="#将频繁的操作改为一次性操作" class="headerlink" title="将频繁的操作改为一次性操作"></a>将频繁的操作改为一次性操作</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/** 将多个li标签插入到list中</span></span><br><span class="line"><span class="comment">  */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> list = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;list&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建文档片段，此时还没有插入到DOM树种</span></span><br><span class="line"><span class="keyword">const</span> frag = <span class="variable language_">document</span>.<span class="title function_">createDocumentFragment</span>()</span><br><span class="line"></span><br><span class="line"><span class="comment">// 把需要插入的节点先放到文档片段中</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="number">10</span>; i++) &#123;</span><br><span class="line">  <span class="keyword">const</span> li = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&#x27;li&#x27;</span>)</span><br><span class="line">  frag.<span class="title function_">appendChild</span>(li)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 将文档片段插入到list中</span></span><br><span class="line">list.<span class="title function_">appendChild</span>(frag)</span><br></pre></td></tr></table></figure>

<h3 id="DOM相关问题"><a href="#DOM相关问题" class="headerlink" title="DOM相关问题"></a>DOM相关问题</h3><h4 id="DOM是那种数据结构"><a href="#DOM是那种数据结构" class="headerlink" title="DOM是那种数据结构"></a>DOM是那种数据结构</h4><p>树</p>
<h4 id="DOM常用的api"><a href="#DOM常用的api" class="headerlink" title="DOM常用的api"></a>DOM常用的api</h4><ol>
<li>节点查找</li>
<li>属性操作</li>
<li>DOM结构操作（增、删、替换、克隆……）</li>
</ol>
<h4 id="attribute和property的区别"><a href="#attribute和property的区别" class="headerlink" title="attribute和property的区别"></a>attribute和property的区别</h4><ol>
<li>attribute：修改HTML属性，会改变HTML结构</li>
<li>property：修改对象属性，不会改变HTML结构</li>
</ol>
<h4 id="一次性插入多个节点，考虑性能问题"><a href="#一次性插入多个节点，考虑性能问题" class="headerlink" title="一次性插入多个节点，考虑性能问题"></a>一次性插入多个节点，考虑性能问题</h4><p>如上DOM性能</p>
<h2 id="BOM"><a href="#BOM" class="headerlink" title="BOM"></a>BOM</h2><blockquote>
<p>BOM（Browser Object Model）：浏览器对象模型，）被广泛应用于 Web 开发之中，主要用于客户端浏览器的管理。</p>
</blockquote>
<h3 id="BOM对象"><a href="#BOM对象" class="headerlink" title="BOM对象"></a>BOM对象</h3><ol>
<li>window对象：JS的最顶层对象，其他BOM对象都是window对象的属性</li>
<li>document对象：文档对象</li>
<li>location对象：浏览器当前URL信息</li>
<li>navigator对象：浏览器本身信息</li>
<li>screen对象：客户端屏幕信息</li>
<li>history对象：浏览器访问历史信息</li>
</ol>
<h4 id="window对象"><a href="#window对象" class="headerlink" title="window对象"></a>window对象</h4><p>BOM对象的核心对象是window对象，他表示浏览器的一个实例。所有的JavaScript全局对象、函数以及变量均自动成为window对象的成员（全局变量是window对象的属性，全局函数是window对象的方法）。</p>
<h5 id="window对象方法"><a href="#window对象方法" class="headerlink" title="window对象方法"></a>window对象方法</h5><p>调用时，省略window.</p>
<ol>
<li>alert()</li>
<li>confirm()</li>
<li>open()</li>
<li>close()</li>
<li>setTimeout()</li>
<li>setInterval()<br>……</li>
</ol>
<h4 id="document对象"><a href="#document对象" class="headerlink" title="document对象"></a>document对象</h4><p>当浏览器加载文档后，会自动构建文档对象模型，把文档中每个元素都映射到一个数据集合中，然后以 document 进行访问。document 对象与它所包含的各种节点（如表单、图像和链接）构成了早期的文档对象模型（DOM 0级）。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">document</span>.<span class="property">img</span>.<span class="property">src</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">document</span>.<span class="property">form</span>.<span class="property">action</span></span><br></pre></td></tr></table></figure>

<h4 id="location对象"><a href="#location对象" class="headerlink" title="location对象"></a>location对象</h4><p>用于获得当前页面的地址 (URL)</p>
<h5 id="location对象属性"><a href="#location对象属性" class="headerlink" title="location对象属性"></a>location对象属性</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="variable constant_">RUL</span> = <span class="string">&quot;https://blog.csdn.net/lhjuejiang/article/details/79453407&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">window</span>.<span class="property">location</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//output</span></span><br><span class="line"><span class="title class_">Location</span>: &#123;</span><br><span class="line">  <span class="attr">ancestorOrigins</span>: <span class="title class_">DOMStringList</span> &#123;<span class="attr">length</span>: <span class="number">0</span>&#125;,</span><br><span class="line">  <span class="attr">assign</span>: ƒ <span class="title function_">assign</span>(),</span><br><span class="line">  <span class="attr">hash</span>: <span class="string">&quot;&quot;</span>,</span><br><span class="line">  <span class="attr">host</span>: <span class="string">&quot;blog.csdn.net&quot;</span>,</span><br><span class="line">  <span class="attr">hostname</span>: <span class="string">&quot;blog.csdn.net&quot;</span>,</span><br><span class="line">  <span class="attr">href</span>: <span class="string">&quot;https://blog.csdn.net/lhjuejiang/article/details/79453407&quot;</span>,</span><br><span class="line">  <span class="attr">origin</span>: <span class="string">&quot;https://blog.csdn.net&quot;</span>,</span><br><span class="line">  <span class="attr">pathname</span>: <span class="string">&quot;/lhjuejiang/article/details/79453407&quot;</span>,</span><br><span class="line">  <span class="attr">port</span>: <span class="string">&quot;&quot;</span>,</span><br><span class="line">  <span class="attr">protocol</span>: <span class="string">&quot;https:&quot;</span>,</span><br><span class="line">  <span class="attr">reload</span>: ƒ <span class="title function_">reload</span>(),</span><br><span class="line">  <span class="attr">replace</span>: ƒ <span class="title function_">replace</span>(),</span><br><span class="line">  <span class="attr">search</span>: <span class="string">&quot;&quot;</span>,</span><br><span class="line">  <span class="attr">toString</span>: ƒ <span class="title function_">toString</span>(),</span><br><span class="line">  <span class="attr">valueOf</span>: ƒ <span class="title function_">valueOf</span>(),</span><br><span class="line">  <span class="title class_">Symbol</span>(<span class="title class_">Symbol</span>.<span class="property">toPrimitive</span>): <span class="literal">undefined</span>,</span><br><span class="line">  <span class="attr">__proto__</span>: <span class="title class_">Location</span>,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="navigator对象"><a href="#navigator对象" class="headerlink" title="navigator对象"></a>navigator对象</h4><p>存储了与浏览器相关的基本信息，如名称、版本和系统等。</p>
<h5 id="navigator对象属性"><a href="#navigator对象属性" class="headerlink" title="navigator对象属性"></a>navigator对象属性</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">window</span>.<span class="property">navigator</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// output</span></span><br><span class="line"><span class="title class_">Navigator</span>: &#123;</span><br><span class="line">  <span class="attr">appCodeName</span>: <span class="string">&quot;Mozilla&quot;</span>,</span><br><span class="line">  <span class="attr">appName</span>: <span class="string">&quot;Netscape&quot;</span>,</span><br><span class="line">  <span class="attr">appVersion</span>: <span class="string">&quot;5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36&quot;</span>,</span><br><span class="line">  <span class="attr">connection</span>: <span class="title class_">NetworkInformation</span> &#123;<span class="attr">onchange</span>: <span class="literal">null</span>, <span class="attr">effectiveType</span>: <span class="string">&quot;4g&quot;</span>, <span class="attr">rtt</span>: <span class="number">50</span>, <span class="attr">downlink</span>: <span class="number">10</span>, <span class="attr">saveData</span>: <span class="literal">false</span>&#125;,</span><br><span class="line">  <span class="attr">cookieEnabled</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">doNotTrack</span>: <span class="literal">null</span>,</span><br><span class="line">  <span class="attr">geolocation</span>: <span class="title class_">Geolocation</span> &#123;&#125;,</span><br><span class="line">  <span class="attr">hardwareConcurrency</span>: <span class="number">4</span>,</span><br><span class="line">  <span class="attr">language</span>: <span class="string">&quot;zh-CN&quot;</span>,</span><br><span class="line">  <span class="attr">languages</span>: (<span class="number">2</span>) [<span class="string">&quot;zh-CN&quot;</span>, <span class="string">&quot;zh&quot;</span>],</span><br><span class="line">  <span class="attr">maxTouchPoints</span>: <span class="number">0</span>,</span><br><span class="line">  <span class="attr">mediaCapabilities</span>: <span class="title class_">MediaCapabilities</span> &#123;&#125;,</span><br><span class="line">  <span class="attr">mediaSession</span>: <span class="title class_">MediaSession</span> &#123;<span class="attr">metadata</span>: <span class="literal">null</span>, <span class="attr">playbackState</span>: <span class="string">&quot;none&quot;</span>&#125;,</span><br><span class="line">  <span class="attr">mimeTypes</span>: <span class="title class_">MimeTypeArray</span> &#123;<span class="number">0</span>: <span class="title class_">MimeType</span>, <span class="number">1</span>: <span class="title class_">MimeType</span>, <span class="number">2</span>: <span class="title class_">MimeType</span>, <span class="number">3</span>: <span class="title class_">MimeType</span>, application/<span class="attr">pdf</span>: <span class="title class_">MimeType</span>, application/x-google-chrome-<span class="attr">pdf</span>: <span class="title class_">MimeType</span>, application/x-<span class="attr">nacl</span>: <span class="title class_">MimeType</span>, application/x-<span class="attr">pnacl</span>: <span class="title class_">MimeType</span>, <span class="attr">length</span>: <span class="number">4</span>&#125;,</span><br><span class="line">  <span class="attr">onLine</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">permissions</span>: <span class="title class_">Permissions</span> &#123;&#125;,</span><br><span class="line">  <span class="attr">platform</span>: <span class="string">&quot;Win32&quot;</span>,</span><br><span class="line">  <span class="attr">plugins</span>: <span class="title class_">PluginArray</span> &#123;<span class="number">0</span>: <span class="title class_">Plugin</span>, <span class="number">1</span>: <span class="title class_">Plugin</span>, <span class="number">2</span>: <span class="title class_">Plugin</span>, <span class="title class_">Chrome</span> <span class="variable constant_">PDF</span> ,<span class="title class_">Plugin</span>: <span class="title class_">Plugin</span>, <span class="title class_">Chrome</span> <span class="variable constant_">PDF</span> <span class="title class_">Viewer</span>: <span class="title class_">Plugin</span>, <span class="title class_">Native</span> <span class="title class_">Client</span>: <span class="title class_">Plugin</span>, <span class="attr">length</span>: <span class="number">3</span>&#125;,</span><br><span class="line">  <span class="attr">product</span>: <span class="string">&quot;Gecko&quot;</span>,</span><br><span class="line">  <span class="attr">productSub</span>: <span class="string">&quot;20030107&quot;</span>,</span><br><span class="line">  <span class="attr">scheduling</span>: <span class="title class_">Scheduling</span> &#123;&#125;,</span><br><span class="line">  <span class="attr">userActivation</span>: <span class="title class_">UserActivation</span> &#123;<span class="attr">hasBeenActive</span>: <span class="literal">true</span>, <span class="attr">isActive</span>: <span class="literal">true</span>&#125;,</span><br><span class="line">  <span class="attr">userAgent</span>: <span class="string">&quot;Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36&quot;</span>,</span><br><span class="line">  <span class="attr">vendor</span>: <span class="string">&quot;Google Inc.&quot;</span>,</span><br><span class="line">  <span class="attr">vendorSub</span>: <span class="string">&quot;&quot;</span>,</span><br><span class="line">  <span class="attr">webdriver</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="attr">webkitPersistentStorage</span>: <span class="title class_">DeprecatedStorageQuota</span> &#123;&#125;,</span><br><span class="line">  <span class="attr">webkitTemporaryStorage</span>: <span class="title class_">DeprecatedStorageQuota</span> &#123;&#125;,</span><br><span class="line">  <span class="attr">__proto__</span>: <span class="title class_">Navigator</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="screen对象"><a href="#screen对象" class="headerlink" title="screen对象"></a>screen对象</h4><p>存储了客户端屏幕信息，这些信息可以用来探测客户端硬件配置。</p>
<h5 id="screen对象属性"><a href="#screen对象属性" class="headerlink" title="screen对象属性"></a>screen对象属性</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">window</span>.<span class="property">screen</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// output</span></span><br><span class="line"><span class="title class_">Screen</span>: &#123;</span><br><span class="line">  <span class="attr">availHeight</span>: <span class="number">1040</span>,</span><br><span class="line">  <span class="attr">availLeft</span>: <span class="number">1366</span>,</span><br><span class="line">  <span class="attr">availTop</span>: -<span class="number">139</span>,</span><br><span class="line">  <span class="attr">availWidth</span>: <span class="number">1920</span>,</span><br><span class="line">  <span class="attr">colorDepth</span>: <span class="number">24</span>,</span><br><span class="line">  <span class="attr">height</span>: <span class="number">1080</span>,</span><br><span class="line">  <span class="attr">orientation</span>: <span class="title class_">ScreenOrientation</span> &#123;<span class="attr">angle</span>: <span class="number">0</span>, <span class="attr">type</span>: <span class="string">&quot;landscape-primary&quot;</span>, <span class="attr">onchange</span>: <span class="literal">null</span>&#125;,</span><br><span class="line">  <span class="attr">pixelDepth</span>: <span class="number">24</span>,</span><br><span class="line">  <span class="attr">width</span>: <span class="number">1920</span>,</span><br><span class="line">  <span class="attr">__proto__</span>: <span class="title class_">Screen</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="history对象"><a href="#history对象" class="headerlink" title="history对象"></a>history对象</h4><p>存储了库互动浏览器的浏览历史。</p>
<h5 id="history对象方法"><a href="#history对象方法" class="headerlink" title="history对象方法"></a>history对象方法</h5><ol>
<li>history.back()：后退</li>
<li>history.forward()：前进</li>
<li>history.go(index)：前进、后退几页</li>
<li>history.pushState()：添加历史记录</li>
<li>history.replaceState()：修改历史记录</li>
</ol>

        </div>

        

        
            <ul class="post-tags-box">
                
                    <li class="tag-item">
                        <a href="/tags/%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB/">#知识体系</a>&nbsp;
                    </li>
                
                    <li class="tag-item">
                        <a href="/tags/%E6%80%BB%E7%BB%93/">#总结</a>&nbsp;
                    </li>
                
                    <li class="tag-item">
                        <a href="/tags/JS/">#JS</a>&nbsp;
                    </li>
                
                    <li class="tag-item">
                        <a href="/tags/JS-WEB-API/">#JS-WEB-API</a>&nbsp;
                    </li>
                
            </ul>
        

        
            <div class="article-nav">
                
                    <div class="article-prev">
                        <a class="prev"
                           rel="prev"
                           href="/2021/05/10/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-JS-WEB-API(%E4%BA%8B%E4%BB%B6)/"
                        >
                            <span class="left arrow-icon flex-center">
                              <i class="fas fa-chevron-left"></i>
                            </span>
                            <span class="title flex-center">
                                <span class="post-nav-title-item">前端基础知识体系-JS-WEB-API(事件)</span>
                                <span class="post-nav-item">上一篇</span>
                            </span>
                        </a>
                    </div>
                
                
                    <div class="article-next">
                        <a class="next"
                           rel="next"
                           href="/2021/05/06/%E7%AE%80%E6%98%93Promise/"
                        >
                            <span class="title flex-center">
                                <span class="post-nav-title-item">简易Promise</span>
                                <span class="post-nav-item">下一篇</span>
                            </span>
                            <span class="right arrow-icon flex-center">
                              <i class="fas fa-chevron-right"></i>
                            </span>
                        </a>
                    </div>
                
            </div>
        

        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            <footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
              <span>2020</span>
              -
            
            2023&nbsp;<i class="fas fa-heart icon-animate"></i>&nbsp;<a href="/">cheng5.du</a>
        </div>
        
        <div class="theme-info info-item">
            Powered by <a target="_blank" href="https://hexo.io">Hexo</a>&nbsp;|&nbsp;Theme&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.5</a>
        </div>
        
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        

        <!-- go comment -->
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-expand-width flex-center">
            <i class="fas fa-arrows-alt-h"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="fas fa-arrow-up"></i>
            </li>
        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
    </ul>
</div>

    </div>

    

    <div class="image-viewer-container">
    <img src="">
</div>


    

</main>




<script src="/js/utils.js"></script>

<script src="/js/main.js"></script>

<script src="/js/header-shrink.js"></script>

<script src="/js/back2top.js"></script>

<script src="/js/dark-light-toggle.js"></script>








<div class="post-scripts">
    
</div>



</body>
</html>
